<style scoped>
</style>
<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="5" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 18px;">
            <span style="color: #2d8cf0;">
                <Icon type="md-create" />&nbsp;&nbsp;
                <span style="color: black;">用户管理&nbsp;&nbsp;>&nbsp;&nbsp;</span>修改密码
            </span>
            </Col>
        </Row>
        <Row>
            <Col span="12" offset="4">
            <Form ref="ruleForm" :rules="ruleValidate" :model="ruleForm" :label-width="180">
                <FormItem prop="oldPassword" label="原始密码">
                    <Input v-model="ruleForm.oldPassword" type="password" />
                </FormItem>
                <FormItem prop="newPassword" label="新密码" >
                    <Input v-model="ruleForm.newPassword" type="password" />
                </FormItem>
                <FormItem prop="passwordConfirm" label="确认密码" >
                    <Input v-model="ruleForm.passwordConfirm" type="password" />
                </FormItem>
                <FormItem>
                    <Button type="success" @click= "submit">保存</Button>
                </FormItem>
            </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
    import md5 from 'js-md5';
    import { mapState, mapActions } from 'vuex'
    export default {
        computed: mapState({
          Authorization: state => state.Authorization
             }),
        data() {
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Please enter your password again'));
                } else if (value !== this.ruleForm.newPassword) {
                    callback(new Error('The two input passwords do not match!'));
                } else {
                    callback();
                }
            };
            return {
                isEdit:'',
                ruleForm: {
                    oldPassword: '',
                    newPassword: '',
                    passwordConfirm :''
                },
                ruleValidate: {
                    oldPassword: [{
                        required: true,
                        message: "请输入原始密码",
                        trigger: "blur"
                    }],
                    newPassword: [{
                        required: true,
                        message: "请输入新密码",
                        trigger: "blur"
                    }],
                    passwordConfirm : [{
                        required: true,
                        validator: validatePassCheck,
                        message: "请确认密码",
                        trigger: "blur"
                    }]
                }
            }
        },
        methods: {
            submit: function () {
                    //修改用户密码
                    let url = '/api/account/password?'+Math.random()              
                    this.$refs['ruleForm'].validate((valid) => {
                        if (valid) {
                            let _this = this;
                            console.log(this.Authorization)
                            let data = this.$qs.stringify({
                                token: this.Authorization,
                                // oldPassword: this.$md5(this.ruleForm.oldPassword),
                                oldPassword:this.ruleForm.oldPassword,
                                newPassword : this.ruleForm.newPassword
                            })
                            this.$axios
                                .post(url, data)
                                .then(response => {
                                    let res = response.data
                                    console.log(response);
                                    if (res.code == 0) {
                                        this.$Message.success('修改成功！')
                                        _this.$router.push({ path: '/dashboard' });
                                    } else if (res.code != 0) {
                                        this.$Message.error(res.message);
                                    }
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                        }
                    })
                }
        }
    }
</script>